{% load static %}
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="-1"/>
    <title>{{ title }}</title>


    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/dcim.css' %}">



    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>

    <script src="{% static 'js/wheelzoom.js' %} "></script>
    <script src="{% static 'js/dcim.js' %} "></script>




    <link rel="shortcut icon" href="{% static 'img/logo.png' %}">
    <link href="https://fonts.googleapis.com/css?family=Peralta" rel="stylesheet">
    <meta name="description" content="">
    <meta name="author" content="Gregorio Flores">

</head>
<body>

    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">

            <div class="navbar-brand">Universal Image data extraction</div>

        </nav>
        <div class="navbar">Author: Gregorio Flores </div>
        <div style="margin-top:40px;padding-bottom:50px; ">

            <ol class="breadcrumb my-2">
                <li class="breadcrumb-item">Decoding</li>
                <li class="breadcrumb-item">Image</li>
                <li class="breadcrumb-item active">{{ info }}</li>
            </ol>

            {% block content %}
            <form method="post" enctype="multipart/form-data" style="margin-top:40px;margin-bottom:50px;" action="../process_file" id="form_one">



                <div class="input-group">
                    <span class="input-group-btn">
                        <span class="btn btn-default btn-file">
                            Browse… <input type="file" name="imgInp" id="imgInp" accept="">
                        </span>
                    </span>
                    <input type="text" class="form-control" readonly>
                </div>
            </form>

            {% endblock %}

            {% block tabs %}


            <section id="tabs" class="project-tab">

                <p style="font-family: 'Peralta', cursive;font-size:24px;color:#999999"> Results </p>


                <div class="row">
                    <div class="col-md-12">
                        <nav>
                            <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
                                role="tab" aria-controls="nav-info" aria-selected="true">File Info</a>


                                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-med"
                                role="tab" aria-controls="nav-med" aria-selected="false">
                                Med Info
                            </a>



                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                        aria-labelledby="nav-home-tab">
                        <table class="table" cellspacing="0" >
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>value</th>

                                </tr>
                            </thead>
                            <tbody id="file_data">


                            </tbody>
                        </table>
                    </div>



                    <div class="tab-pane fade" id="nav-med" role="tabpanel"
                    aria-labelledby="nav-profile-tab">
                    <table class="table" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Key</th>
                                <th>Value</th>

                            </tr>
                        </thead>
                        <tbody  id="med_data">


                        </tbody>
                    </table>
                </div>




            </div>
        </div>
    </div>

</section>


{% endblock %}


{% block imagen %}

<table class="table" cellspacing="0" >
    <tbody>
        <tr>
            <td width="210px"><div style="">
                <label class="switch">
                    <input type="checkbox" id="use_zoom" >
                    <span class="slider"></span>
                </label>
                Zoom
            </div> </td>
            <td>
             <div class="">

                <img id='img_upload' style="text-align:center;" />

            </div>
        </td>
    </tr>
</tbody>
</table>

</div>

{% endblock %}


</div>
</div>

<footer class="footer">
    Coded with <span title="heart">♥</span> Author Gregorio Flores &copy; 2018 - <a href="http://www.aniachitech.com" target="_blank"> aniachitech.com </a>
</footer>



<!-- Modal -->
<div class="modal fade" id="modal_dialog" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Format invalide</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img src="{% static 'img/logo.png' %}" style="margin-right:30px">
        Le serveur n'a pas pu traiter ce format
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

      </div>
    </div>
  </div>
</div>

<!--End Modal -->

</body>
</html>

